<template>
	<div>
		<div class="the-header" >
			<div class="header-logo" @click="goHome()">

				<i class="el-icon-headset"></i>
				<span>至安生浮音</span>
			</div>

			<div>
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
					<el-menu-item index="1" @click="goHome()">首页</el-menu-item>
					<el-menu-item index="2" @click="goSinger()">歌手</el-menu-item>
				
				
					<el-menu-item index="3" @click="goSongList()">歌单</el-menu-item>
					<el-menu-item index="4" @click="goMyMusic()">我的音乐</a></el-menu-item>
				</el-menu>
			</div>
			<!-- <div class="line"></div> -->

			<div class="header-search" style="margin-left: 10px;">
				<input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
				<div class="search-btn" @click="goSearch">
					<el-button type="primary" icon="el-icon-search">搜索</el-button>
				</div>
			</div>
		</div>


	</div>
</template>

<script>
	// import {navMsg} from '../../assets/data/header';


	export default {
		name: 'the-header',
		data() {
			return {
				// navMsg:[] ,   //导航栏

				activeIndex: '1',
				input: '',
				keywords:''   //搜索关键字


			}
		},
		// created(){
		// 	this.navMsg = navMsg;
		// },

		methods: {
			goHome() {
				this.$router.push({
					path: "/"
				})
			},
			goSinger() {
				this.$router.push({
					path: "/singer"
				})
			},
			goSongList() {
				this.$router.push({
					path: "/song-list"
				})

			},
			goMyMusic() {
				this.$router.push({
					path: "/my-music"
				})
			},
			goSearch(){
				this.$router.push({
					path:"/search",
					query:{keywords:this.keywords}
				})
				
				
			}


		}
	}
</script>

<style lang="scss" scoped>
	@import '../../assets/css/the-header.scss';
</style>
